import React from 'react';
import { Layout } from 'antd';
import { Menu } from 'antd';
import { SettingOutlined } from "@ant-design/icons"
import { Outlet, useNavigate } from "react-router-dom"
const { Sider, Content } = Layout;
interface Props {

}
interface MenuItem {
    item: object
    key: string
}
function Custommanage(props: Props) {
    var navigate = useNavigate()
    var handleClick = function ({ item, key }: MenuItem) {
        console.log(key);
        navigate(key)
    }
    return (
        <Layout className='custommanage'>
            <Sider theme='light'>
                <Menu className='mymenu' theme='light' mode='inline' defaultSelectedKeys={['/index/custommanage/custom_index']} onClick={handleClick}>
                    <Menu.Item key="/index/custommanage/custom_index" >客服管理</Menu.Item>
                    <Menu.SubMenu key="SubMenu" title="设置" icon={<SettingOutlined />}>
                        <Menu.Item key="1" >客户信息</Menu.Item>
                        <Menu.Item key="2" >客户标签</Menu.Item>
                        <Menu.Item key="3" >vip客户设置</Menu.Item>
                        <Menu.Item key="4" >黑名单客户</Menu.Item>
                        <Menu.Item key="5" >客户保存规则</Menu.Item>
                        <Menu.Item key="6" >客户分配规则</Menu.Item>
                    </Menu.SubMenu>
                </Menu>

            </Sider>
            <Content style={{ padding: 20 }}>
                <Outlet></Outlet>
            </Content>
        </Layout>



    );
}

export default Custommanage;